
<template>
  <div class="page">
    <s-header :name="'投诉举报'" :back="'/government/user'"></s-header>
    <div class="content">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="product-list-refresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          :finished-text="dataList.length ? '没有更多了' : '暂无记录'"
          @load="onLoad"
          @offset="10"
        >
          <template v-if="dataList.length">
            <div class="card-box" v-for="(value, index) in dataList" :key="index">
              <div class="card-item" @click="handleToDetail(value.id)">
                <div class="card-header">
                  <div class="header-title">
                    <div class="title">{{ value.createTime }}</div>
                    <div :class="`notice-status ${tagClass(value.status)}`">
                      {{ statusMap[value.status] }}
                    </div>
                  </div>
                </div>
                <div class="card-body">
                  <ul class="apply-info">
                    <li>投诉人：{{ value.complainantName }}</li>
                    <li>投诉对象：{{ value.complaintObject }}</li>
                    <li>投诉对象位置：{{ value.complaintLocation }}</li>
                  </ul>
                </div>
              </div>
            </div>
          </template>
          <van-image v-else :src="listNull" class="empty" width="120" alt="搜索" />
        </van-list>
      </van-pull-refresh>
    </div>
    <div class="btn-group">
      <van-button type="button" class="cus-btn btn-default" @click="handleToRouter('/government/user')">返回</van-button>
      <van-button type="button" class="cus-btn btn-primary" @click="handleToRouter('/government/user/complaint/add')">新增举报</van-button>
    </div>
  </div>
</template>

<script>
// computed
import { reactive, toRefs, onMounted } from 'vue'
import sHeader from '@/components/SimpleHeader'
import { useRouter } from 'vue-router'
import { getComplaintList } from '@/service/user'
import listNull from '@/assets/Images/list_null.png'
export default {
  components: {
    sHeader,
  },
  setup() {
    const router = useRouter()
    const state = reactive({
      listNull: listNull,
      loading: false,
      listQuery: { pageNo: 1, pageSize: 5 },
      totalPage: 0,
      refreshing: false,
      finished: false,
      dataList: [],
      statusMap: ['未办理', '已办理', '已撤销'],
    })

    onMounted(async () => {})

    const handleToRouter = (r, query) => {
      router.push({ path: r, query: query || {} })
    }

    //获取列表
    const getDataList = () => {
      getComplaintList(state.listQuery).then((res) => {
        const list = res.data.records || []
        state.dataList = state.dataList.concat(list)
        state.totalPage = res.data.total || 0
        state.loading = false
        if (state.dataList.length >= state.totalPage) state.finished = true
      })
    }

    // 加载列表
    const onLoad = () => {
      if (!state.refreshing && state.dataList.length < state.totalPage) {
        state.listQuery.pageNo = state.listQuery.pageNo + 1
      }
      if (state.refreshing) {
        state.dataList = []
        state.refreshing = false
      }
      getDataList()
    }

    // 刷新列表
    const onRefresh = () => {
      state.refreshing = true
      state.finished = false
      state.loading = true
      state.listQuery.pageNo = 1
      onLoad()
    }

    const handleToDetail = (id) => {
      router.push({ path: `/government/user/complaint/detail/${id}` })
    }

    const tagClass = (status) => {
      const statusMap = {
        0: '',
        1: 'status-success',
        2: 'status-danger',
      }
      return statusMap[status]
    }

    return {
      ...toRefs(state),
      handleToDetail,
      tagClass,
      onLoad,
      onRefresh,
      getDataList,
      handleToRouter,
    }
  },
}
</script>

<style lang="less" scoped>
@import '@/common/style/mixin';
.page {
  .content {
    height: calc(~'(100vh - 120px)');
    overflow: hidden;
    overflow-y: scroll;
    .empty {
      display: block;
      width: 150px;
      margin: 50px auto 20px;
    }
    .card-box {
      margin-top: 10px;
      color: #2e3f6a;
      font-weight: 400;
      .header-title {
        font-size: 16px;
        font-weight: bold;
        .title {
          width: 190px;
          line-height: 28px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .fj();
        .notice-status {
          background: #e1f1ff;
          border-radius: 3px;
          color: #216eec;
          font-size: 13px;
          font-weight: 400;
          padding: 4px 14px 5px;
        }
        .status-success {
          background-color: #e8f7e0;
          color: #5eb02d;
        }
        .status-info {
          background-color: #ddf6fa;
          color: #009eb6;
        }
        .status-danger {
          background-color: #ffe9e9;
          color: #df3838;
        }
        .finish {
          background-color: #72c604;
        }
      }
      .card-body {
        display: flex;
        align-items: center;
        justify-content: space-between;
        // background-color: #FFF;
        .apply-info {
          li {
            margin-top: 6px;
          }
        }
        .reapply {
          background: #3487f6;
          border-radius: 3px;
          color: @fc;
          font-size: 13px;
          font-weight: 400;
          padding: 4px 14px 5px;
        }
      }
      .van-divider {
        margin: 10px 0 0;
      }
    }
  }
  .btn-group {
    padding: 20px 0;
    .cus-btn {
      width: 167px;
    }
  }
}
</style>
